html {
    height: 100% !important;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.back-to-top {
    width: 62px;
    height: 88px;
    background-image: url("../images/space.png") !important;
}

.back-to-top:hover {
    animation: to-top-fly .4s steps(1) infinite;
}

.music-box {
    width: 90px;
    height: 90px;
    padding: 16px;
    position: fixed !important;
    top: 85%;
    left: 5%;
    background-image: url("../images/pan.png");
    background-size: 100% 100%;
}

.singer-img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    animation: turn 10s linear infinite;
}

@keyframes turn {
    from {
        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    to {
        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes to-top-fly {
    0% {
        background-position-x: -142.5px;
    }

    16.5% {
        background-position-x: -284.5px;
    }

    33% {
        background-position-x: -429.5px;
    }

    49.5% {
        background-position-x: -570.5px;
    }

    66% {
        background-position-x: -714.5px;
    }

    82.5% {
        background-position-x: -856.5px;
    }

    100% {
        background-position-x: 0px;
    }
}